<template>
<!-- 底部组件 -->
  <div class="footer">
    <!-- 左右两个按钮，功能：切换两个页面 -->
    <div
      @click="getflag(true)"
      :class="flag == true ? 'active' : 'footer-left'"
    >
      <i class="iconfont icon-yinle5"></i>音乐
    </div>
    <div
      @click="getflag(false)"
      :class="flag == false ? 'active' : 'footer-left'"
    >
      <i class="iconfont icon-shipin1"></i>视频
    </div>
  </div>
</template>

<script>
export default {
  props: {
    flag: Boolean,
  },
  methods: {
    getflag(val) {
      this.$emit("getflag", val);
    },
  },
};
</script>

<style scoped lang='scss'>
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3rem;
  display: flex;
  align-items: center;
  text-align: center;
  font-size: 66.7px;
  z-index: 999;
  background: #fff;
  i {
    margin: 0 46px;
    font-size: 73px;
  }
  .footer-left {
    flex: 1;
  }
  .footer-right {
    flex: 1;
  }
  .active{
        flex: 1;
        color: limegreen;

    }
}
</style>